<template>
	<view class="content">
		<view :id='"text_" + itemId'  class="text" :class='{"ellipsis-3": !isShow}'>{{content}}</view>
		<view v-if='showBtn' class='show-btn' :class='{hide: isShow}' @click='handleChange'>
			<view>{{isShow? "收起" : "展开"}}</view>
			<view class='icon cuIcon-right'></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: String,
			itemId: String
		},
		data() {
			return {
				showBtn: false,
				isShow: true
			}
		},
		mounted() {
			let that = this
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query
				  .select("#text_" + this.itemId)
				  .boundingClientRect((data) => {
					  let lineHeight = uni.upx2px(40);
					  let contentHeight = data.height;
					  if(contentHeight / lineHeight > 3) {
						  that.showBtn = true;
						  this.isShow = false;
					  }
				  
				  })
				  .exec();
			})
		},
		methods: {
			handleChange() {
				this.isShow = !this.isShow
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.content {
		margin-top: 53rpx;
		
		.text {
			font-size: 28rpx;
			color: #222222;
			line-height: 40rpx;
		}
		
		.show-btn {
			margin-top: 40rpx;
			width: 120rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			font-size: 26rpx;
			color: #666666;
			margin-right: auto;
			line-height: 1;
			
			&.hide {
				.icon {
					transform: rotate(-90deg);
				}
			}
			
			.icon {
				font-size: 24rpx;
				transform: rotate(90deg);
				margin-left: 5rpx;
				transition: all 0.3s;
			}
		}
	}
</style>